<template>
  <div class="contarner-page" @click.stop="showLanguageHandel">
    <page-header ref="languageRef"></page-header>
    <main>
      <div class="downloader flex_ccenter" v-if="!success">
        <div class="container">
          <div class="hero-widgets flex_between c-fff">
            <div class="tool-item shou flex_center" @click="changeTab(0)">
              <img src="/static/images/video.svg" alt="savinginsta video" />
              <span class="f-16">Video</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(1)">
              <img src="/static/images/Photo.svg" alt="savinginsta photo" />
              <span class="f-16">Photo</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(2)">
              <img src="/static/images/Reels.svg" alt="savinginsta reels" />
              <span class="f-16">Reels</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(3)">
              <img src="/static/images/Story.svg" alt="savinginsta story" />
              <span class="f-16">Story</span>
            </div>
            <div class="tool-item shou flex_center" @click="changeTab(4)">
              <img src="/static/images/Igtv.svg" alt="savinginsta IGTV" />
              <span class="f-16">IGTV</span>
            </div>
          </div>
          <div class="banner-heading flex_ccenter">
            <div class="heading-item" v-show="current == 0">
              <h1 class="title fw700 f-42 c-fff">تحميل فيديو انستقرام</h1>
              <h2 class="sub c-fff f-18 fw400">
                قم بتنزيل فيديو Instagram والصور والبكرات والقصص وIGTV المحتوى
                عبر الإنترنت
              </h2>
            </div>
            <div class="heading-item" v-show="current == 1">
              <nuxt-link to="/ar/instagram-photo-download">
                <div @click="goToTop('Photo')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    برنامج تحميل الصور من الانستقرام
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                أدخل عنوان URL لصورة Instagram أدناه
              </p>
            </div>
            <div class="heading-item" v-show="current == 2">
              <nuxt-link to="/ar/instagram-reels-video-download">
                <div @click="goToTop('reels')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    تحميل بكرات انستقرام
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                أدخل عنوان URL لـ Instagram Reels أدناه
              </p>
            </div>
            <div class="heading-item" v-show="current == 3">
              <nuxt-link to="/ar/instagram-story-download">
                <div @click="goToTop('story')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    تحميل قصة الانستقرام
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                أدخل عنوان URL لقصص Instagram أدناه
              </p>
            </div>
            <div class="heading-item" v-show="current == 4">
              <nuxt-link to="/ar/igtv-downloader">
                <div @click="goToTop('igtv')" class="tItem">
                  <h3 class="title fw700 f-42 c-fff shou">
                    تحميل فيديو اي جي تي في
                  </h3>
                </div>
              </nuxt-link>
              <p class="sub c-fff f-18 fw400">
                أدخل عنوان URL لـ Instagram IGTV أدناه
              </p>
            </div>
          </div>
          <div class="form flex_center">
            <div class="input-box flex_between">
              <!-- <input
                type="text"
                class="input f-18"
                v-model="input"
                @input="handleInput"
                @paste="handleInput"
                placeholder="Paste URL Instagram"
                list="fruits"
                name="fruit"
              />
              <datalist id="fruits">
                <option value="Apple"></option>
                <option value="Banana"></option>
                <option value="Cherry"></option>
              </datalist> -->
              <input
                type="text"
                class="input f-18"
                v-model="input"
                :disabled="isHttpLoading"
                @input="handleInput"
                @paste="handleInput"
                @keydown="sendDownload($event)"
                placeholder="Paste URL Instagram"
              />
              <div
                class="Paste shou flex_center"
                @click="handleClickPasted"
                v-if="input == ''"
              >
                <div class="btnbg"></div>
                <div class="f-16 c-000 fw700">Paste</div>
              </div>
              <div
                class="clear shou flex_center"
                v-if="input != '' && !isHttpLoading"
                @click.stop="input = ''"
              >
                <div class="btnbg"></div>
                <div class="f-16 c-000 fw700">Clear</div>
              </div>
            </div>
            <div
              v-if="!isHttpLoading"
              @click.stop="downloadHandel"
              class="submit shou fw700 c-fff flex_center"
            >
              Download
            </div>
            <div v-else class="submit shou fw700 c-fff flex_center">
              Please wait
            </div>
          </div>
          <div class="app-submit flex_ccenter">
            <div
              class="submit flex_center"
              v-if="!isHttpLoading"
              @click.stop="downloadHandel"
            >
              <div class="fw700 c-fff f-21">Download</div>
            </div>
            <div class="submit flex_center" v-else>
              <div class="fw700 c-fff f-21">Please wait</div>
            </div>
          </div>
          <div class="loading" v-if="isHttpLoading">
            <div class="loading-dots flex_center">
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
              <div class="dot"></div>
            </div>
            <div class="tips f-18 flex_center">
              <div>جارٍ استرداد البيانات، يرجى الانتظار بضع ثوانٍ!</div>
            </div>
          </div>
          <div class="error flex_ccenter" v-if="httpError1">
            <div class="hono flex_">
              <div class="error-img"></div>
              <div class="error-img"></div>
              <div class="error-img"></div>
            </div>
            <div class="errMsg f-18">
              لا يستطيع الموقع معالجة الرابط الخاص بك لأنه خاص
            </div>
          </div>
          <div class="error flex_ccenter" v-if="httpError2">
            <div class="hono flex_">
              <div class="error-img"></div>
              <div class="error-img"></div>
              <div class="error-img"></div>
            </div>
            <div class="errMsg f-18">
              البيانات التي أدخلتها ليست رابطا، يرجى إدخال رابط صالح لها مثال:
              <div>https://www.instagram.com/reel/Cml9qu-ISqx</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 广告位start -->
      <!-- 广告位end -->
      <div class="container" v-if="!success">
        <div class="body-content">
          <div class="title-box">
            <h3 class="app-box__title f-21 fw700 c-000">
              قم بالتنزيل باستخدام تطبيق Insta Downloader
            </h3>
            <p class="f-16 c-ccc">
              يقدم تطبيقنا حلاً سريعًا وبسيطًا لتنزيل مقاطع فيديو Instagram، مما
              يوفر مقاطع فيديو عالية الجودة بدون علامات مائية.
            </p>
          </div>
          <div class="list-tools-pc">
            <div class="tool-box flex_between">
              <div class="tool-info Reverse">
                <nuxt-link to="/ar">
                  <div @click="goToTop('video')" class="tItem">
                    <h4>برنامج تحميل فيديوهات الانستقرام</h4>
                  </div>
                </nuxt-link>
                <p>
                  تم تصميم Savinginsta لتمكينك من تنزيل ملفاتك الخاصة محتوى من
                  انستقرام. ويقدم الدعم لتنزيل كليهما مقاطع فيديو فردية ومتعددة
                  من Insta.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  src="/static/images/instagram-video-downloader.webp"
                  alt="Instagram video downloader"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  src="/static/images/instagram-video-downloader-app.webp"
                  alt="Instagram video downloader"
                />
              </div>
            </div>
            <div class="tool-box tool-reverse flex_between">
              <div class="tool-info Reverse">
                <nuxt-link to="/ar/instagram-photo-download">
                  <div @click="goToTop('Photo')" class="tItem">
                    <h4>برنامج تحميل الصور من الانستقرام</h4>
                  </div>
                </nuxt-link>
                <p>
                  إن برنامج Savinginsta's Instagram Photo Downloader يجعل الأمر
                  سهلاً لحفظ أي صور فردية أو متعددة، بما في ذلك الصور المجمعة،
                  من انستغرام. باستخدام هذه الأداة، يمكنك تنزيل مشاركة فردية
                  الصور أو مجموعة من صور Instagram بسيطة و واضحة.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/instagram-photo-downloader.webp"
                  alt="Instagram photo downloader"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/instagram-photo-downloader-app.webp"
                  alt="Instagram photo downloader"
                />
              </div>
            </div>
            <div class="tool-box flex_between">
              <div class="tool-info Reverse">
                <nuxt-link to="/ar/instagram-reels-video-download">
                  <div @click="goToTop('reels')" class="tItem">
                    <h4>تحميل بكرات انستقرام</h4>
                  </div>
                </nuxt-link>
                <p>
                  يمكّنك برنامج Savinginsta's Instagram Reels Downloader من ذلك
                  قم بتنزيل مقاطع فيديو Reels بسهولة من منشورات Instagram إلى
                  جهازك، مما يوفر حلاً بسيطًا حيث Instagram في حد ذاته لا يقدم
                  أي دعم لهذه الوظيفة.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/download-instagram-reels.webp"
                  alt="Download Instagram Reels"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/download-instagram-reels-app.webp"
                  alt="Download Instagram Reels"
                />
              </div>
            </div>
            <div class="tool-box tool-reverse flex_between">
              <div class="tool-info Reverse">
                <nuxt-link to="/ar/igtv-downloader">
                  <div @click="goToTop('igtv')" class="tItem">
                    <h4>تحميل اي جي تي في</h4>
                  </div>
                </nuxt-link>
                <p>
                  توفر قصص Instagram منصة مميزة للمستخدمين شاركوا تجاربهم
                  اليومية من خلال الصور ومقاطع الفيديو مع أ جمهور عريض. في بعض
                  الأحيان، قد ترغب في حفظ المفضلة القصة، ولكن هذه الوظيفة غير
                  متوفرة في التطبيق. يعالج Savinginsta هذه المشكلة من خلال توفير
                  حل يتيح للمستخدمين تنزيل قصص Instagram وعرضها بسهولة دون
                  الاتصال بالإنترنت، مما يضمن عدم فقدان المحتوى الذي لا يُنسى
                  أبدًا.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/igtv-downloader.webp"
                  alt="IGTV downloader"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/igtv-downloader-app.webp"
                  alt="IGTV downloader"
                />
              </div>
            </div>
            <div class="tool-box flex_between">
              <div class="tool-info Reverse">
                <nuxt-link to="/ar/instagram-story-download">
                  <div @click="goToTop('story')" class="tItem">
                    <h4>عارض قصة Instagram</h4>
                  </div>
                </nuxt-link>
                <p>
                  يقدم IGTV مقاطع فيديو طويلة، وإذا لم تتمكن من ذلك قم بمشاهدتها
                  على الفور، لديك خيار تنزيلها مقاطع فيديو IGTV على جهاز
                  الكمبيوتر الخاص بك. هذا يسمح لك بسهولة قم بزيارتها مرة أخرى
                  واستمتع بها لاحقًا، حتى بدون الاتصال بالإنترنت الاتصال، ويزيل
                  المخاوف بشأن محتوى IGTV تتم إزالتها أو غير متوفرة.
                </p>
              </div>
              <div class="tool-thumb">
                <img
                  loading="lazy"
                  src="/static/images/instagram-story-download.webp"
                  alt="Instagram Story Download"
                />
              </div>
              <div class="tool-thumb-app">
                <img
                  loading="lazy"
                  src="/static/images/instagram-story-download-app.webp"
                  alt="Instagram Story Download"
                />
              </div>
            </div>
          </div>
          <div class="app-box Reverse">
            <div class="app-box__info ">
              <h3 class="app-box__title f-21 fw700 c-000" style="text-align: right;">
                قم بالتنزيل باستخدام تطبيق Insta Downloader
              </h3>
              <p class="f-16 c-ccc" style="text-align: right;">
                يقدم تطبيقنا حلاً سريعًا وبسيطًا للتنزيل مقاطع فيديو Instagram،
                توفر مقاطع فيديو عالية الجودة بدون العلامات المائية.
              </p>
            </div>
            <div class="app-link">
              <a 
                  target="_blank" href="https://play.google.com/store/apps/details?id=ins.freevideodownload.pro">
                <img src="/static/images/google-play.webp" alt="Download app " />
              </a>
              <a href="https://apps.apple.com/us/app/repost-for-video-save-story/id6462401460"  target="_blank">
                <img src="/static/images/IOS.webp" alt="Download app " />
              </a>
            </div>
          </div>
          <div class="quick-info Reverse">
            <h3 class="f-32 c-000">SAVINGINSTA - أفضل أداة لتنزيل Instagram</h3>
            <p class="f-16 c-ccc">
              تبرز Savinginsta باعتبارها أداة تنزيل Instagram من الدرجة الأولى،
              تم تصميمه بخبرة لتنزيل المحتوى عالي الجودة بسرعة من انستغرام. عند
              البحث عن الطريقة الأكثر فعالية للتنزيل وسائط Instagram، يظهر
              برنامج Savinginsta downloader كرائد حل طرف ثالث.
            </p>
            <p class="f-16 c-ccc">
              إنستغرام، المشهور بأنه تطبيق مشاركة الصور الأكثر شعبية في العالم،
              يشهد تحميل ملايين الصور يومياً. لمثل هذا لحظات، تصبح ضرورة تنزيل
              فيديو Instagram واضح، وتوفير حل سلس لاحتياجاتك الفورية. هذه الأداة
              ضرورية لأي شخص يتطلع إلى الحفاظ على ملفاته محتوى Instagram المفضل
              بكفاءة.
            </p>
          </div>
          <div class="features c-fff Reverse">
            <h3 class="h3 fw700 f-21">
              مميزات برنامج Savinginsta Instagram Video Downloader:
            </h3>
            <div class="attributes-list flex_between">
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  تنزيل فيديو Instagram سريع وسهل وآمن.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  يمكنك تسجيل الخروج من حسابك على Instagram.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  بنقرة زر واحدة فقط، يمكنك تنزيل صور Instagram ومقاطع الفيديو.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  قم بتنزيل الصور ومقاطع الفيديو وحفظها بصيغتها الأصلية العالية
                  التعريف والجودة.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  من الحسابات الشخصية، قم بتنزيل وحفظ مقاطع فيديو Instagram.
                </div>
              </div>
              <div class="item flex_">
                <div class="bgimg"></div>
                <div class="f-14 c-fff">
                  السرعة العالية: اعتبارًا من الآن، تقدم Savinginsta الأسرع
                  سرعات التنزيل.
                </div>
              </div>
            </div>
          </div>
          <div class="how Reverse">
            <div class="how-title">
              <h3 class="f-36 c-000 italic">
                كيفية استخدام Savinginsta Instagram Downloader للحفظ من IG
              </h3>
              <div class="note c-ccc f-16">
                ملحوظة: تأكد من أن الفيديو أو الصورة التي تريدها على Instagram
                التنزيل يكون من حساب عام.
              </div>
            </div>
            <div class="steps">
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">الخطوة 01:</span>
                  <span class="f-16 c-000"
                    >انسخ عنوان URL لصور ومقاطع فيديو Instagram</span
                  >
                </div>
                <div class="app-step">
                  <div class="fw700 c-000 f-16">على تطبيق الانستغرام:</div>
                  <div class="c-000 f-16">
                    بالنسبة لنظام التشغيل iOS: انقر للحصول على عنوان URL لصورة
                    Instagram.
                  </div>
                  <div class="c-000 f-16">
                    لنظام Android: انقر فوق المنشور وحدد "نسخ". Instagram URL"،
                    ثم اضغط على "نسخ عنوان URL للمشاركة". الرابط سيكون نسخ إلى
                    الحافظة الخاصة بك.
                  </div>
                  <div class="fw700 c-000 f-16">
                    - على جهاز الكمبيوتر/جهاز Mac:
                  </div>
                  <div class="c-000 f-16">
                    انقر بزر الماوس الأيمن على تاريخ الفيديو أو الصورة في
                    Instagram و حدد "نسخ عنوان الرابط" لتنزيل محتوى Instagram
                    عليه سطح المكتب الخاص بك.
                  </div>
                </div>
              </div>
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">الخطوة 02:</span>
                  <span class="f-16 c-000">
                    الصق عنوان URL في Savinginsta.App</span
                  >
                </div>
                <div class="app-step">
                  <div class="c-000 f-16">
                    انتقل إلى Savinginsta.App - تطبيق Instagram المخصص
                    downloader.
                  </div>
                  <div class="c-000 f-16">
                    انسخ عنوان URL المنسوخ والصقه في حقل النص المحدد.
                  </div>
                </div>
              </div>
              <div class="step">
                <div class="one">
                  <span class="fw700 c-blue f-16">الخطوة 03:</span>
                  <span class="f-16 c-000">بدء التنزيل</span>
                </div>
                <div class="app-step">
                  <div class="c-000 f-16">
                    انقر فوق الزر "تنزيل" لبدء فيديو Instagram أو عملية تنزيل
                    الصور.
                  </div>
                  <div class="fw700 c-000 f-16">معلومات الاستخدام الهامة</div>
                  <div class="c-000 f-16">
                    تم تصميم Savinginsta بشكل أساسي لتنزيل مقاطع الفيديو و الصور
                    من حساب Instagram الخاص بك.
                  </div>
                  <div class="c-000 f-16">
                    نحن نعطي الأولوية لخصوصية المستخدم ونحتفظ بالحق في الرفض
                    الخدمة إذا تم استخدام أدواتنا لانتهاك حقوق الآخرين الخصوصية
                    أو الوصول إلى المواد غير المصرح بها.
                  </div>
                </div>
              </div>
            </div>
            <div class="user-note f-16">
              <div class="app-tip"></div>
              من أجل فهم شامل لسياساتنا

              <a class="fw700 c-blue" href="/terms-of-service">
                يرجى قراءة شروط الخدمة الكاملة هنا.</a
              >
            </div>
          </div>
          <div class="faq-section">
            <h3 class="faq-title f-36 c-000 italic">FAQ</h3>
            <div class="accordion Reverse">
              <div
                id="faq"
                itemscope="itemscope"
                itemtype="https://schema.org/FAQPage"
              >
                <div
                  itemprop="mainEntity"
                  itemscope="itemscope"
                  itemtype="https://schema.org/Question"
                  class="accordion-item"
                  :key="k"
                  v-for="(item, k) in faqList"
                >
                  <h4 itemprop="name" class="accordion-title fw700 f-16">
                    {{ item.title }}
                  </h4>
                  <div
                    itemprop="acceptedAnswer"
                    itemscope=""
                    itemtype="https://schema.org/Answer"
                  >
                    <div
                      itemprop="text"
                      class="accordion-text f-16 c-ccc fw400"
                    >
                      {{ item.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 解析结果 start -->
      <div class="container" v-if="success">
        <success-content
          @refresh="refresh"
          :list="successList"
        ></success-content>
      </div>
      <!-- 解析结果 end -->
    </main>
    <footer>
      <div class="container">
        <div class="footer-content Reverse">
          <div class="footer-link">
            <div class="row flex_between">
              <div class="col-12">
                <div class="link-label fw700 c-000 f-21">أدوات</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/ar/instagram-story-download"
                      >تنزيل قصة الانستقرام</nuxt-link
                    >
                  </li>
                  <li>
                    <nuxt-link to="/ar/instagram-reels-video-download"
                      >تحميل بكرات الانستقرام</nuxt-link
                    >
                  </li>
                  <li>
                    <a href="https://savingtik.com/" target="_blank"
                      >تنزيل تيك توك</a
                    >
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">يدعم</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/contact"> اتصال </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/blog"> Blog </nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">قانوني</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/terms-of-service"> شروط الخدمة </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/privacy-policy"> سياسة الخصوصية </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="copyright flex_ccenter">
            <b class="fw700 f-21 c-000">نحن لسنا تابعين لـ Instagram أو Meta</b>
            <div class="c-ccc f-16">
              © {{new Date().getFullYear()}} Insta Downloader All rights reserved.
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import pageHeader from "~/components/page-header.vue";
import SuccessContent from "~/components/success-content.vue";
import CryptoJS from "crypto-js";
import { handleClick, checkString } from "@/plugins/Firebase.js";

export default {
  components: { pageHeader, SuccessContent },
  name: "IndexPage",
  head: {
    htmlAttrs: {
      lang: "ar",
    },
    bodyAttrs: {
      "data-lang": "ar",
    },
    title:
      "Instagram Downloader - تنزيل فيديو Instagram عبر الإنترنت - Savinginsta",
    meta: [
      { property: "og:locale", content: "ar" },
      //Page Information
      {
        name: "description",
        content:
          "Savinginsta: قم بتنزيل مقاطع الفيديو والبكرات والصور من Instagram بسهولة باستخدام أداتنا سهلة الاستخدام. احفظ مقاطع الفيديو الخاصة بك على Instagram بسرعة وأمان على أي جهاز.",
      },
      //Schema.org Microdata
      {
        itemprop: "name",
        content:
          "Instagram Downloader - تنزيل فيديو Instagram عبر الإنترنت - Savinginsta",
      },

      // Facebook / OpenGraph
      {
        property: "og:title",
        content:
          "Instagram Downloader - تنزيل فيديو Instagram عبر الإنترنت - Savinginsta",
      },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "https://savinginsta.com/ar" },

      {
        property: "og:description",
        content:
          "Savinginsta: Easily download Instagram videos, reels, and photos with our user-friendly tool. Save your Instagram videos quickly and safely on any device.",
      },
      //Twitter
      { name: "twitter:card", content: "summary" },
      { name: "twitter:url", content: "https://savinginsta.com/ar" },
      {
        name: "twitter:title",
        content:
          "Instagram Downloader - تنزيل فيديو Instagram عبر الإنترنت - Savinginsta",
      },
      {
        name: "twitter:description",
        content:
          "Savinginsta: Easily download Instagram videos, reels, and photos with our user-friendly tool. Save your Instagram videos quickly and safely on any device.",
      },
      //multilingual
      {
        name: "google",
        content: "notranslate",
      },
      {
        itemprop: "image",
        content: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg",
      },
      {
        property: "og:image",
        content: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg",
      },
      {
        name: "twitter:image",
        content: "https://savinginsta.com/static/images/savinginsta_thumbnail.jpg",
      },
    ],
    link: [
      //multilingual
      {
        rel: "alternate",
        hreflang: "x-default",
        href: "https://savinginsta.com/ar",
      },
      {
        rel: "alternate",
        hreflang: "en",
        href: "https://savinginsta.com/",
      },
      {
        rel: "alternate",
        hreflang: "en-in",
        href: "https://savinginsta.com/in",
      },
      {
        rel: "alternate",
        hreflang: "vi",
        href: "https://savinginsta.com/vn",
      },
      {
        rel: "alternate",
        hreflang: "tr",
        href: "https://savinginsta.com/tr",
      },
      {
        rel: "alternate",
        hreflang: "id",
        href: "https://savinginsta.com/id",
      },
      {
        rel: "alternate",
        hreflang: "fr",
        href: "https://savinginsta.com/fr",
      },
      {
        rel: "alternate",
        hreflang: "pt",
        href: "https://savinginsta.com/pt",
      },
      {
        rel: "alternate",
        hreflang: "ru",
        href: "https://savinginsta.com/ru",
      },
      {
        rel: "alternate",
        hreflang: "es",
        href: "https://savinginsta.com/es",
      },
      {
        rel: "alternate",
        hreflang: "ms",
        href: "https://savinginsta.com/ms",
      },
      {
        rel: "alternate",
        hreflang: "ko",
        href: "https://savinginsta.com/ko",
      },
      {
        rel: "alternate",
        hreflang: "ja",
        href: "https://savinginsta.com/ja",
      },
      {
        rel: "alternate",
        hreflang: "jv",
        href: "https://savinginsta.com/jv",
      },
      {
        rel: "alternate",
        hreflang: "cs",
        href: "https://savinginsta.com/cs",
      },
      {
        rel: "alternate",
        hreflang: "de",
        href: "https://savinginsta.com/de",
      },
      {
        rel: "alternate",
        hreflang: "it",
        href: "https://savinginsta.com/it",
      },
      {
        rel: "alternate",
        hreflang: "pl",
        href: "https://savinginsta.com/pl",
      },
      {
        rel: "alternate",
        hreflang: "hu",
        href: "https://savinginsta.com/hu",
      },
      {
        rel: "alternate",
        hreflang: "nl",
        href: "https://savinginsta.com/nl",
      },
      {
        rel: "alternate",
        hreflang: "ro",
        href: "https://savinginsta.com/ro",
      },
      {
        rel: "alternate",
        hreflang: "el",
        href: "https://savinginsta.com/el",
      },
      {
        rel: "canonical",
        href: "https://savinginsta.com/ar",
      },
    ],
    script: [
      {
        json: {
          "@context": "https://schema.org",
          "@type": "WebSite",
          name: "Instagram Downloader - تنزيل فيديو Instagram عبر الإنترنت - Savinginsta",
          url: "https://savinginsta.com",
          description:
            "Savinginsta: قم بتنزيل مقاطع الفيديو والبكرات والصور من Instagram بسهولة باستخدام أداتنا سهلة الاستخدام. احفظ مقاطع الفيديو الخاصة بك على Instagram بسرعة وأمان على أي جهاز.",
          publisher: {
            "@type": "Organization",
            name: "Savinginsta",
            logo: {
              "@type": "ImageObject",
              url: "https://savinginsta.com/static/images/logo.webp",
            },
          },
        },
        type: "application/ld+json",
      },
    ],
  },
  data() {
    return {
      input: "",
      success: false,
      isHttpLoading: false,
      httpError1: false,
      httpError2: false,
      current: 0,
      successList: [],
      faqList: [
        {
          title: `ما هو برنامج تنزيل الفيديو من Instagram؟`,
          content: `إن Instagram Video Downloader عبارة عن أداة قائمة على الويب مصممة لحفظ الصور ومقاطع الفيديو ومحتوى IGTV على Instagram لاستخدامها لاحقًا. يبرز Savinginsta كخيار أفضل لتنزيل المحتوى من Instagram بسهولة.`,
        },
        {
          title: `هل تسجيل الدخول إلى حساب Instagram الخاص بي ضروري لاستخدام Savinginsta؟`,
          content: `لا، ليست هناك حاجة لتسجيل الدخول إلى حسابك على Instagram. يضمن Savinginsta تنزيلات آمنة ومجهولة من Instagram دون الحاجة إلى أي معلومات شخصية.`,
        },
        {
          title: `هل يمكنني حفظ مقاطع الفيديو مباشرة من Instagram؟`,
          content: `لا يمكن تنزيل مقاطع الفيديو مباشرة من خلاصة Instagram أو قصص الآخرين من خلال Instagram نفسه. ومع ذلك، Savinginsta يقدم حلاً بسيطًا. ما عليك سوى زيارة موقع الويب الخاص بهم على https:// Savinginsta.com واتباع التعليمات المباشرة المقدمة.`,
        },
        {
          title: `هل خدمة تنزيل الفيديو والصور من Instagram مجانية؟`,
          content: `نعم، يوفر Savinginsta هذه الخدمة مجانًا تمامًا، دون أي قيود على عدد التنزيلات.`,
        },
        {
          title: `هل يمكنني تنزيل المحتوى من حسابات Instagram الخاصة؟`,
          content: `في الواقع، يتيح لك Savinginsta تنزيل مقاطع الفيديو والقصص والصور من حسابات Instagram الخاصة. التعليمات التفصيلية متوفرة على منصتهم.`,
        },
        {
          title: `هل من الممكن حفظ قصص Instagram؟`,
          content: `قطعاً. باستخدام Savinginsta، يمكنك عرض وتنزيل أي قصة على Instagram. ما عليك سوى النقر على النقاط الثلاث (⁝) في القصة، ونسخ الرابط ولصقه في Savinginsta لبدء التنزيل.`,
        },
        {
          title: `هل يدعم Savinginsta التنزيلات على أجهزة الكمبيوتر؟`,
          content: `نعم، Savinginsta متوافق تمامًا مع أجهزة الكمبيوتر، مما يتيح لك تنزيل مقاطع فيديو Instagram والصور والقصص والمزيد مباشرة على جهاز الكمبيوتر الخاص بك.`,
        },
        {
          title: `هل يمكنني استخدام Savinginsta للتنزيل من Instagram على أجهزة Android؟`,
          content: `بالتأكيد. بالنسبة لمستخدمي Android، ما عليك سوى نسخ رابط منشور Instagram ولصقه في Savinginsta وحفظه. لمزيد من التفاصيل، قم بزيارة دليلهم حول التنزيل من Instagram على Android.`,
        },
        {
          title: `كيف يمكنني تنزيل مقاطع فيديو وصور Instagram على iPhone/iPad (iOS)؟`,
          content: `صممت Savinginsta دليلاً سهل الاستخدام خطوة بخطوة لتنزيل أنواع مختلفة من مقاطع الفيديو على جهاز iPhone أو iPad. اتبع هذا الرابط للحصول على التعليمات: قم بتنزيل مقاطع فيديو Instagram على iPhone.`,
        },
        {
          title: `ماذا لو تم تشغيل فيديو Instagram بدلاً من تنزيله؟`,
          content: `لحل هذه المشكلة، انقر بزر الماوس الأيمن على الفيديو وحدد "حفظ باسم..." لاختيار موقع الحفظ المطلوب، بدلاً من النقر بزر الماوس الأيسر.`,
        },
        {
          title: `أين يتم تخزين مقاطع الفيديو بعد التنزيل؟`,
          content: `عادةً ما يتم تخزين مقاطع الفيديو التي تم تنزيلها في مجلد "التنزيلات" على كل من الأجهزة المحمولة وأجهزة الكمبيوتر التي تعمل بنظام Android.`,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["language"]),
  },
  mounted() {
    this.debouncedDownInput = this.debounce(this.downInput, 1000);

    //到达首页
    handleClick("guide_homepage_frist", {});
    handleClick("guide_homepage", {});
  },
  methods: {
    async downloadHandel() {
      if (this.isHttpLoading || this.input === "") return;
      this.isHttpLoading = false;
      this.httpError1 = false;
      this.httpError2 = false;
      this.input = this.input.replace(/^.*\s?https:\/\//, "https://");
      const insUrlPattern = new RegExp("^http(s|)://.*instagram.com.*/.*$");
      let type = checkString(this.input);
      if (!insUrlPattern.test(this.input)) {
        //点击解析下载按钮
        handleClick("action_ins_detect_boinsom", {
          site: "other",
          noislink: this.input,
          from: "video",
          type: type,
        });
        this.httpError2 = true;
        this.isHttpLoading = false;
        return;
      }
      //点击解析下载按钮
      handleClick("action_ins_detect_boinsom", {
        site: "other",
        from: "video",
        type: type,
      });
      //开始解析  ins_start_resolve
      handleClick("ins_start_resolve", {
        islink: this.input,
        from: "video",
        type: type,
      });
      this.isHttpLoading = true;
      try {
        let result = this.uki(this.input);
        const response = await fetch(
          "https://savinginsta.com/api/downloader/analysis",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              path: result,
            }),
          }
        );
        let encryptedResponse = await response.text();
        let parse = JSON.parse(encryptedResponse);
        if (parse.code != 200) {
          // 解析失败  ins_resolve_fail
          handleClick("ins_resolve_fail", {
            reason: "Failed to fetch",
            islink: this.input,
            from: "video",
            type: type,
          });
          this.httpError1 = true;
          this.isHttpLoading = false;
          return;
        } else {
          //解析成功  ins_resolve_success
          handleClick("ins_resolve_success", {
            type: type,
            from: "video",
          });
          let decryptedResponse = await this.eki(parse.data); // 使用你的解密函数
          this.successList = JSON.parse(decryptedResponse);
          this.success = true;
          this.isHttpLoading = false;
        }
      } catch (error) {
        // 解析失败  ins_resolve_fail
        handleClick("ins_resolve_fail", {
          reason: "Failed to fetch",
          islink: this.input,
          from: "video",
          type: type,
        });
        console.error(error);
        this.httpError1 = true;
        this.isHttpLoading = false;
      }
    },

    uki(input) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
       
      
  try {
        const complexKey = [
          process.env.part1,
          process.env.part2,
          process.env.part3,
          process.env.part4,
          process.env.part5,
          process.env.part6,
          process.env.part7,
          process.env.part8,
        ].join("");
        const keyBytes = CryptoJS.enc.Utf8.parse(complexKey);
        const inputBytes = CryptoJS.enc.Utf8.parse(input);
        const ivBytes = CryptoJS.lib.WordArray.random(IV_SIZE);
        const encrypted = CryptoJS.DES.encrypt(inputBytes, keyBytes, {
          iv: ivBytes,
          mode: CryptoJS.mode.CBC,
          padding: CryptoJS.pad.Pkcs7,
        });
        const ciphertext = ivBytes.concat(encrypted.ciphertext);
        return ciphertext.toString();
      } catch (error) {
        console.error(error);
        return null;
      }
    },
    eki(cipherText) {
      let CIPHER_ALGORITHM = "DES-CBC";
      let IV_SIZE = 8;
       
      const complexKey = [
          process.env.part1,
          process.env.part2,
          process.env.part3,
          process.env.part4,
          process.env.part5,
          process.env.part6,
          process.env.part7,
          process.env.part8,
        ].join("");
      try {
        let keyBytes = CryptoJS.enc.Utf8.parse(
          complexKey.padEnd(CIPHER_ALGORITHM === "DES-CBC" ? 8 : 16)
        );
        let ivBytes = { iv: CryptoJS.enc.Hex.parse(process.env.DES_IV) }; // 如果使用CBC模式，需要一个初始化向量iv，这里是空向量
        let decrypted = CryptoJS.DES.decrypt(
          { ciphertext: CryptoJS.enc.Hex.parse(cipherText) },
          keyBytes,
          ivBytes
        );
        return decrypted.toString(CryptoJS.enc.Utf8);
      } catch (e) {
        console.error(e);
        return null;
      }
    },
    sendDownload(event) {
      if (event.keyCode === 13 && !this.isHttpLoading) {
        this.downloadHandel();
        event.preventDefault();
        return false;
      }
    },
    changeTab(k) {
      this.current = k;
    },
    handleInput(e) {
      this.debouncedDownInput(e);
    },
    debounce(fn, delay) {
      let timer;
      return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(context, args);
        }, delay);
      };
    },

    downInput(e) {
      let type = checkString(e.target.value);
      // 粘贴链接到输入框 action_ins_paste
      handleClick("action_ins_paste", {
        islink: e.target.value,
        from: "photo",
        type: type,
      });
    },
    handleClickPasted() {
      if (!navigator.clipboard) {
        console.log("Clipboard API not available");
        return;
      }
      navigator.clipboard
        .readText()
        .then((text) => {
          this.input = text;
          let type = checkString(text);
          // 粘贴链接到输入框 action_ins_paste
          handleClick("action_ins_paste", {
            islink: text,
            from: "photo",
            type: type,
          });
        })
        .catch((err) => {
          console.error("Failed to read clipboard contents: ", err);
        });
    },
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
    refresh() {
      this.success = false;
      this.input = "";
      this.successList = [];
    },
    goToTop(site) {
      //切换页面
      handleClick("action_page_switch", {
        site: site,
        from: top,
      });
    },
    goToTools(site) {
      //切换页面
      handleClick("action_page_switch", {
        site: site,
        from: tools,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/static/style/index.css";
.loading {
  .loading-dots {
    position: relative;
    z-index: 999;
    margin-top: 70px;
  }

  .dot {
    background-color: #ffffff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 10px;
    animation: loading-animation 1.5s infinite;
  }

  .dot:nth-child(2) {
    animation-delay: 0.5s;
  }

  .dot:nth-child(3) {
    animation-delay: 0.8s;
  }
  .dot:nth-child(4) {
    animation-delay: 1s;
  }
}
@keyframes loading-animation {
  0%,
  50%,
  80%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.5);
  }
}
.features {
  .bgimg {
    margin: 0;
    margin-left: 10px !important;
  }
}
@media (max-width: 768px) {
  .features {
    .bgimg {
      margin: 0 !important;
    }
  }
  .loading {
    .loading-dots {
      margin-top: 26px !important;
    }
    .dot {
      width: 8px !important;
      height: 8px !important;
    }
  }
}
</style>
